<%--
  Created by IntelliJ IDEA.
  User: linnanxiang
  Date: 2020/12/21
  Time: 10:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>随季节变化使用量</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>

  </head>

  <body>
  <div id="main" style="width: 1400px;height:700px;"></div>
<script>
  $(document).ready(function (){

    myChart = echarts.init(document.getElementById('main'));

    var posList = [
      'left', 'right', 'top', 'bottom',
      'inside',
      'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
      'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];

    myChart.configParameters = {

      rotate: {
        min: -90,
        max: 90
      },
      align: {
        options: {
          left: 'left',
          center: 'center',
          right: 'right'
        }
      },
      verticalAlign: {
        options: {
          top: 'top',
          middle: 'middle',
          bottom: 'bottom'
        }
      },
      position: {
        options: echarts.util.reduce(posList, function (map, pos) {
          map[pos] = pos;
          return map;
        }, {})
      },
      distance: {
        min: 0,
        max: 100
      }
    };

    myChart.config = {
      rotate: 90,
      align: 'left',
      verticalAlign: 'middle',
      position: 'insideBottom',
      distance: 15,
      onChange: function () {
        var labelOption = {
          normal: {
            rotate: myChart.config.rotate,
            align: myChart.config.align,
            verticalAlign: myChart.config.verticalAlign,
            position: myChart.config.position,
            distance: myChart.config.distance
          }
        };
        myChart.setOption({
          series: [{
            label: labelOption
          }, {
            label: labelOption
          }, {
            label: labelOption
          }, {
            label: labelOption
          }]
        });
      }
    };


    var labelOption = {
      show: true,
      position: myChart.config.position,
      distance: myChart.config.distance,
      align: myChart.config.align,
      verticalAlign: myChart.config.verticalAlign,
      rotate: myChart.config.rotate,
      formatter: '{c}  {name|{a}}',

      fontSize: 16,
      rich: {
        name: {
          textBorderColor: '#fff'
        }
      }
    };

    option = {
      title: {
        text: '随季节变化租用情况',
        textStyle: {
          fontSize: 40,
          fontFamily:'华文行楷',
          fontWeight: '100',
          align: 'center',
          color: '#080b30',
        },
      },
      color: ['#003366', '#006699', '#4cabce'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['非注册用户', '注册用户', '总租车人数']
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          mark: {show: true},
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar', 'stack']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {show: false},
          data: []
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '非注册用户',
          type: 'bar',
          barGap: 0,
          label: labelOption,
          data: []
        },
        {
          name: '注册用户',
          type: 'bar',
          label: labelOption,
          data: []
        },
        {
          name: '总租车人数',
          type: 'bar',
          label: labelOption,
          data: []
        },
      ]
    };

    var dates=[];
    var casual=[];
    var registered=[];
    var count=[];


    $.ajax({
      url: 'yearseason',
      method: "get",
      type: "json",
      success: function (data) {

       if (data){
           for (var i=0;i<data.length;i++){
               dates.push(data[i].season);
           }
           for (var i=0;i<data.length;i++){
               casual.push(data[i].casual);
               registered.push(data[i].registered);
               count.push(data[i].count);
           }
       }

        option.xAxis[0].data=dates;

       option.series[0].data=casual;
        option.series[1].data=registered;

        option.series[2].data=count;

        console.log(option)
        myChart.setOption(option);
      },
      error: function (errMsg) {
        console.error(errMsg)
      }
    });

  })


</script>


  </body>
</html>
